<template>
    <el-aside width="210px" class="wxasid" v-if="hackReset">
        <sidebar-item :routes='menuIndex' :activeItem='defaultAsideActive'/>
    </el-aside>
</template>
<script>
import SidebarItem from '../components/SidebarItem'
import { mapState } from "vuex";
export default {
    data() {
        return {
            hackReset: true
        };
    },
    computed: mapState([
        "menuIndex",
        "defaultAsideActive",
        "asideIsClick"
    ]),
    components: {
        SidebarItem
    },
    watch: {
        defaultAsideActive: {
            handler: function(val, oldVal) {
                if (this.asideIsClick == false) {
                    this.hackReset = false; //销毁组件
                    this.$nextTick(() => {
                        this.hackReset = true; //重建组件
                    });
                }
                this.$store.commit("SET_ASIDEISCLICK", true);
            },
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
.wxasid {
  height: 100%;
  overflow-x:hidden;
  border-right: solid 1px #e6e6e6;
}
.el-aside::-webkit-scrollbar {
    display:none;
}
.el-menu{
  border-right: none;
}
</style>
